<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/demo.css">
    <script src="../js/jQuery.js"></script>

</head>
<body>
    <div class="top">
        <span><input type="checkbox" id="allSelect">全选</span>
        <span>商品</span>
        <span>商品信息</span>
        <span>数量</span>
        <span>单价</span>
        <span>操作</span>
    </div>
    <div class="shopSum">
        <div class="shop">
            <div class="checked">
                <input type="checkbox" class="goodsInput">
            </div>
            <div class="photo">
                <img src="../img/相机.jpg" alt="">
            </div>
            <div class="msg">
                <span>1</span>
            </div>
            <div class="quantity">
                <input class="delBtn" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                <input class="num" name="" type="text" value="1" style=" width:30px;height:18px; text-align:center; border:1px solid #ccc;" />
                <input class="addBtn" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
            </div>
            <div class="prise" style="color: red;">￥<span>1.65</span></div>
            <div class="done"><span id="del">删除</span></div>
        </div>
        <div class="shop">
            <div class="checked">
                <input type="checkbox" class="goodsInput">
            </div>
            <div class="photo">
                <img src="../img/康扣.jpg" alt="">
            </div>
            <div class="msg">
                <span>1</span>
            </div>
            <div class="quantity">
                <input class="delBtn" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                <input class="num" name="" type="text" value="1" style=" width:30px;height:18px; text-align:center; border:1px solid #ccc;" />
                <input class="addBtn" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
            </div>
            <div class="prise" style="color: red;">￥<span>1.65</span></div>
            <div class="done"><span id="del">删除</span></div>
        </div>
    </div>
    <div class="bottom">
        <div class="left">
            <button id="addGoods">添加商品</button>
            <button id="reverse">反选</button>
        </div>
        <div class="kong" style="width:100px;height:100%;"></div>
        <div class="sum">已选商品<span style="color: tomato;">0</span>件</div>
        <div class="price">合计(不含运费):￥<span style="color: red;"></span></div>
        <div class="other">结算</div>
    </div>

<script>

// 商品价格统计（封装方法：多处需要使用）
function totalPrice(){
    let totalPrice = 0
    let totalSum = 0
    // 状态伪类选择器
    $('.goodsInput:checked').each((i,item) => {
        let num = $(item).parents('.shop').find('.num').val()
        let price = $(item).parents('.shop').find('.prise').find('span').text()
        totalSum += parseInt(num)
        // 注意：要先算小数乘以整十数,
        // totalPrice += parseInt(num) * parseFloat(price)
        totalPrice += parseInt(num) * (parseFloat(price) *100)
    })
    $('.sum').find('span').text(totalSum)
    $('.price').find('span').text(totalPrice/100)

    // 判断已经勾选的数量和总勾选的是否一致，否则全选框不全选
    let state = $('.goodsInput:checked').length === $('.goodsInput').length
    $('#allSelect').prop('checked',state)
}

// 全选、全不选
$('#allSelect').click(function(){
    let state = $(this).prop('checked')
    $('.goodsInput').prop('checked',state)

    totalPrice()
})
// 反选
$('#reverse').click(function(){
    $('.goodsInput').each((i,item) => {
        let state = $(item).prop('checked')
        $(item).prop('checked',!state)
    })

    totalPrice()
})
// 添加购物车
$('#addGoods').click(function(){
    $('.shopSum').append(`
    <div class="shop">
            <div class="checked">
                <input type="checkbox" class="goodsInput">
            </div>
            <div class="photo">
                <img src="../img/康扣.jpg" alt="">
            </div>
            <div class="msg">
                <span>1</span>
            </div>
            <div class="quantity">
                <input class="delBtn" name=""  style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="-" />
                <input class="num" name="" type="text" value="1" style=" width:30px;height:18px; text-align:center; border:1px solid #ccc;" />
                <input class="addBtn" name="" style=" width:20px; height:18px;border:1px solid #ccc;" type="button" value="+" />
            </div>
            <div class="prise" style="color: red;">￥<span>1.65</span></div>
            <div class="done"><span id="del">删除</span></div>
        </div>
    `)
    // 判断已经勾选的数量和总勾选的是否一致，否则全选框不全选
    let state = $('.goodsInput:checked').length === $('.goodsInput').length
    $('#allSelect').prop('checked',state)
})

// 删除商品（事件委托）
$('.shopSum').on('click','#del',function(){
    $(this).parents('.shop').remove()

    totalPrice()
})

// 商品数量添加
$('.shopSum').on('click','.addBtn',function(){
    let num = $(this).prev().val()
    num++  //隐式转换
    $(this).prev().val(num)

    totalPrice()
})
// 商品数量减少
$('.shopSum').on('click','.delBtn',function(){
    let num = $(this).next().val()
    num--
    if(num<=1) num = 1
    $(this).next().val(num)

    totalPrice()

})

// 商品非数字替换 (淘宝思路)
$('.shopSum').on('input','.num',function(){
    let num = $(this).val()
    num = String(num).replace(/\D/g,'')
    if(Number(num)<1) num = 1
    $(this).val(num)


})
// 京东思路：绑定失焦事件，失焦中获取input内的值，判断框内的值是否是NaN，是NaN则改为1
$('.shopSum').on('blur','.num',function(){
    let num = $(this).val()
    if(isNaN(num) || num<1) num = 1
    $(this).val(num)
    totalPrice()
})

// 给checkbox绑定事件委托
$('.shopSum').on('click','.goodsInput',function(){
    totalPrice()
})
</script>
</body>
</html>